<template>
    <view>
        <view v-if="labelPosition === 'left'" class="jk-form-item" :style="{borderBottom: showBorderBottom ? 'solid 1rpx #eee' : 'none'}">
            <view class="jk-form-item-title">
                <view>{{ label || '暂无' }}</view>
                <view v-if="showStar" style="color: red;margin-left: 4rpx;">*</view>
            </view>
            <view class="jk-form-item-val" :style="{ paddingRight: showRightIcon ? '40rpx' : '' }">
                <view @click="onSelect" style="width: 100%;height: 100%;display: flex;align-items: center;">
                    <slot></slot>
                </view>
                <view v-if="showRightIcon" class="selected-icon">
                    <u-icon v-if="!value" :name="rightIcon" :size="rightIconSize" :color="rightIconColor" @click="onSelect"></u-icon>
                    <u-icon v-else name="trash" :size="rightIconSize" :color="rightIconColor" @click="onClear"></u-icon>
                </view>
            </view>
        </view>
        <view v-else class="jk-form-item-top" :style="{borderBottom: showBorderBottom ? 'solid 1rpx #eee' : 'none'}">
            <view class="jk-form-item-top-title">{{ label || '暂无' }}</view>
            <view class="jk-form-item-top-val" @click="onSelect">
                <slot></slot>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        label: {
            type: String,
            default: ''
        },
        labelPosition: {
            type: String,
            default: 'left'
        },
        rightIcon: {
            type: String,
            default: 'arrow-right'
        },
        rightIconSize: {
            type: String,
            default: '20'
        },
        rightIconColor: {
            type: String,
            default: '#2d8cf0'
        },
        showRightIcon: {
            type: Boolean,
            default: true
        },
        showBorderBottom: {
            type: Boolean,
            default: true
        },
        showStar: {
            type: Boolean,
            default: false
        },
        value: {
            type: [Number, String],
            default: ''
        }
    },
    methods: {
        onClear() {
            this.$emit('clear');
        },
        onSelect() {
            this.$emit('click');
        }
    }
}
</script>
<style scoped lang="scss">
    .jk-form-item-top {
        border-bottom: solid 1rpx #eee;
        font-size: 26rpx;
        .jk-form-item-top-title {
            width: 200rpx;
            height: 84rpx;
            display: flex;
            align-items: center;
        }
        .jk-form-item-top-val {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }
    }

    .jk-form-item {
        height: 84rpx;
        border-bottom: solid 1rpx #eee;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        .jk-form-item-title {
            width: 200rpx;
            height: 100%;
            display: flex;
            align-items: center;
        }
        .jk-form-item-val {
            width: calc(100% - 200rpx);
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            padding-right: 40rpx;
            white-space: pre-wrap;
            word-break: break-word;
            .selected-icon {
                width: 40rpx;
                height: 40rpx;
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: -20rpx;
            }
        }
    }

</style>
